<template>
    <div>
         <div style="margin-bottom: 10px;">
    <!--面包屑-->
    <a-breadcrumb>
      <a-breadcrumb-item href="">
        <a-icon type="home" />  首页
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        客户审核
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
        <div style="width: 400px;display: flex;justify-content: space-between">
            <a-input  placeholder="客户名" v-model="query.username" style="width: 150px">
            </a-input>
            <a-input  placeholder="客户地址" v-model="query.userAdress"  style="width: 150px">
            </a-input>
            <a-button @click="onSearch" style="width:65px;background-color:dodgerblue;color: white">
                查询
            </a-button>
            <br /><br />
        </div>
        <div>
            <a-table :columns="columns" :data-source="clients" bordered
                        :loading="loading"
                        :pagination="pagination"
                        :current="pagination.current"
                        @change="tableChange"
            >
                <template
                        v-for="col in ['clientName', 'clientTel', 'clientAddres']"
                        :slot="col"
                        slot-scope="text, record, index"
                >
                    <template>
                        {{ text }}
                    </template>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                    <div  style="display: flex;justify-content: space-around">
                        <!-- <a-button @click="showDrawer(record.id)" type="primary" style="width: 65px">
                            查看
                        </a-button> -->
                        <a-button @click="showModal(record)" type="primary" style="width: 65px">
                            审核
                        </a-button>
                    </div>
                </template>
            </a-table>
            <div>
                
                <a-modal
                        title="审核"
                        :visible="modelVisible"
                        :dialog-style="{ top: '20px' }"
                        :width="720"
                        :loading="loading"
                        okText="通过"
                        cancelText="不通过"
                        @ok="modelHandleOk(client.clientCode)"
                        @cancel="ss()"

                >
                    <template slot="footer">
                        <a-button @click="ss()">取消</a-button>
                        <a-button @click="modelCancel(client.clientCode)">不通过</a-button>
                        <a-button @click="modelHandleOk(client.clientCode)">通过</a-button>

                    </template>
                    <a-form :form="form" layout="vertical" hide-required-mark>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="客户编号">
                                    <a-input v-model="client.clientCode" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="营业执照图片">
                                    <!-- <a-input v-model="client.clientLicensePicture"/> -->
                                    <!-- <a-img src="client.clientLicensePicture"></a-img> -->
                                    <img :src="client.clientLicensePicture" style="width:100px;height:80px">
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="执照编号">
                                    <a-input v-model="client.clientLicenseNumber"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="用户等级">
                                    <a-input
                                        v-model="client.clientLevelName"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="预存款余额">
                                    <a-input
                                        v-model="client.clientBalance"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="更新时间">
                                    <a-date-picker
                                        v-model="client.updateTime"
                                        :disabled-date="disabledStartDate"
                                        show-time
                                        format="YYYY-MM-DD HH:mm:ss"
                                        @openChange="handleStartOpenChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="审核状态">
                                    <a-input
                                        v-model="client.accountStatusStr"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script>
    const columns = [

        {
            title: '客户名称',
            dataIndex: 'clientName',
            width: '25%',
            scopedSlots: { customRender: 'clientname' },
        },
        {
            title: '联系电话',
            dataIndex: 'clientTel',
            width: '15%',
            scopedSlots: { customRender: 'clientTel' },
        },
        {
            title: '联系地址',
            dataIndex: 'clientAddress',
            width: '40%',
            scopedSlots: { customRender: 'clientAddress' },
        },
        {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
        },
    ];
    import * as cliServe from '@/services/kehu/ClientService.js'
    export default {
        name:'client',
        data() {
            return {
                clients:[],
                columns,
                editingKey: '',
                form: this.$form.createForm(this),
                visible: false,
                modelVisible: false,
                query:{username:"",userAdress:""},
                client:'',
                loading: false,
                pagination: {
                    total: 0,
                    current: 1,
                    defaultPageSize: 4,
                    showSizeChanger: true,
                    pageSizeOptions: ['5', '15', '30', '50']
                }
            };
        },
        methods: {
            async onSearch() {
                console.log(this.query.username);
                console.log(this.query.userAdress);
                this.loading = true
                let resp =  await cliServe.queryList(this.query);
                this.loading = false;
                this.clients = resp;
            },

            /**
   *  监听table变化,更新当前页码
   */
            tableChange (e) {
                this.pagination.current = e.current
            },

            ss(){
                this.modelVisible = false;
            },
         
            showModal(record) {
                this.modelVisible = true;
                console.log(record);
                this.client = record;
            },
            async modelHandleOk(clientCode) {
                console.log(clientCode);
                await cliServe.suessR(clientCode);
                let resp =  await cliServe.getclientList();
                this.clients = resp;
                this.modelVisible = false;
                this.$message.success('审核成功', 3,);
            },
            async modelCancel(clientCode) {
                console.log(clientCode);
                await cliServe.unsucessR(clientCode);
                let resp =  await cliServe.getclientList();
                this.clients = resp;
                this.modelVisible = false;
            },
        },
        async created(){
            this.loading = true;
         let resp =  await cliServe.getclientList();
         this.loading = false;
         this.clients = resp;
         console.log("客户列表"+this.clietns);
        }
    };
</script>
<style scoped>
    .editable-row-operations a {
        margin-right: 8px;
    }
</style>
